<!-- 我的页面 my.vue -->
<template>
  <view class="mine-container">
    <!-- 用户信息 -->
    <view class="user-card">
      <image :src="userInfo.avatar" class="avatar" mode="aspectFill" />
      <view class="user-meta">
        <text class="username">{{userInfo.nickname}}</text>
        <text class="user-id">ID: {{userInfo.userId}}</text>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-list">
      <view class="menu-item" @click="navigateTo('medical-records')">
        <uni-icons type="calendar" size="20" color="#007aff" />
        <text class="menu-text">我的病历</text>
        <uni-icons type="arrowright" size="16" color="#999" />
      </view>
      <view class="menu-item" @click="navigateTo('settings')">
        <uni-icons type="gear" size="20" color="#007aff" />
        <text class="menu-text">个人设置</text>
        <uni-icons type="arrowright" size="16" color="#999" />
      </view>
      <view class="menu-item" @click="showAbout">
        <uni-icons type="info" size="20" color="#007aff" />
        <text class="menu-text">关于我们</text>
        <uni-icons type="arrowright" size="16" color="#999" />
      </view>
    </view>

    <!-- 关于弹窗 -->
    <uni-popup ref="aboutPopup" type="dialog">
      <uni-popup-dialog title="关于我们" :content="aboutContent" />
    </uni-popup>
  </view>
</template>



<script setup>
import { ref } from 'vue'

const userInfo = ref({
  avatar: '/static/userhead.jpg',
  nickname: '医疗用户',
  userId: '100001'
})

const aboutContent = `当前版本：V1.0.0
开发团队：智能医疗团队
联系方式：400-1234-5678`

const showAbout = () => {
  uni.showModal({
    title: '关于我们',
    content: aboutContent,
    showCancel: false
  })
}

const navigateTo = (type) => {
  const pages = {
    'medical-records': '/pages/records/index',
    'settings': '/pages/settings/index'
  }
  uni.navigateTo({ url: pages[type] })
}
</script>

<style lang="scss">
.mine-container {
  background: #f5f5f5;
  min-height: 100vh;

  .user-card {
    display: flex;
    align-items: center;
    padding: 40rpx;
    background: #fff;
    margin-bottom: 30rpx;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-right: 30rpx;
      border: 2rpx solid #eee;
    }

    .user-meta {
      display: flex;
      flex-direction: column;
      
      .username {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }
      .user-id {
        font-size: 24rpx;
        color: #999;
      }
    }
  }

  .menu-list {
    background: #fff;
    padding: 0 30rpx;

    .menu-item {
      display: flex;
      align-items: center;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border: none;
      }

      .uni-icons {
        margin-right: 20rpx;
      }
      .menu-text {
        flex: 1;
        font-size: 30rpx;
      }
    }
  }
}
</style>